<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../../css/elementUI.css" />
<style>
	*{
		padding: 0;
		margin: 0;
	}

	
</style>
</head>
<body>
	<div id="app">
		<el-card class="box-card">
			<el-form :inline="true" class="demo-form-inline">
			  <el-form-item label="用户名">
			    <el-input v-model="userInfo.uname" placeholder="用户名"></el-input>
			  </el-form-item>
				<el-form-item label="邮箱">
					<el-input v-model="userInfo.email" placeholder="邮箱"></el-input>
				</el-form-item>
			  <el-form-item label="权限">
			    <el-select v-model="userInfo.status" placeholder="权限">
			      <el-option label="所有" value="0"></el-option>
			      <el-option label="用户" value="2"></el-option>
			      <el-option label="管理员" value="1"></el-option>
			      <el-option label="禁用" value="3"></el-option>
			    </el-select>
			  </el-form-item>
			  <el-form-item>
			    <el-button type="primary" @click="queryUserInfo">查询</el-button>
			  </el-form-item>
			</el-form>
			
			<!-- 表格数据 -->
			<el-table
			    :data="users"
			    border
			    show-header
			    highlight-current-row
			    align="center"
			    style="width: 100%; margin-top:40px; min-height:340px">
			    <el-table-column
			      label="用户编号" width="80">
			      <template slot-scope="scope">
			        <span>{{ scope.row.id }}</span>
			      </template>
			    </el-table-column>
			    <el-table-column
			      label="用户名" width="100">
			      <template slot-scope="scope">
			        <span>{{ scope.row.uname }}</span>
			      </template>
			    </el-table-column>
			    <el-table-column
			      label="密码">
			      <template slot-scope="scope">
			        <span>{{ scope.row.upass }}</span>
			      </template>
			    </el-table-column>
			    <el-table-column
			      label="头像" width="125">
			      <template slot-scope="scope">
    				<div class="demo-image__preview">
					<el-image 
					    style="width: 100px; height: 100px"
					    :src="'../../././'+scope.row.head "
					    :preview-src-list="['../../././'+scope.row.head ]">
					  </el-image>
				    
				</div>
			      </template>
			    </el-table-column>
				<el-table-column
						label="性别" width="80">
					<template slot-scope="scope">
						<span>{{ scope.row.gender }}</span>
					</template>
				</el-table-column>
				<el-table-column
						label="邮箱">
					<template slot-scope="scope">
						<span>{{ scope.row.email }}</span>
					</template>
				</el-table-column>
			    <el-table-column
			      label="注册时间">
			      <template slot-scope="scope">
			        <span>{{ scope.row.regtime }}</span>
			      </template>
			    </el-table-column>
			    <el-table-column
			      label="权限" width="80">
			      <template slot-scope="scope">
			        <span>{{ scope.row.status == 2 ? "用户" : scope.row.status == 1 ? "管理员" : "禁用"}}</span>
			      </template>
			    </el-table-column>
			    
			    <el-table-column label="操作" width="216">
			      <template slot-scope="scope">
			        <el-button
			          size="mini"
			          @click="set(scope.$index, scope.row)">编辑</el-button>
			          <el-button
			          size="mini"
			          @click="add(scope.$index, scope.row)">添加</el-button>
			        <el-button
			          size="mini"
			          type="danger"
			          @click="Delete(scope.$index, scope.row)">禁用</el-button>
			      </template>
			    </el-table-column>
			  </el-table>

		</el-card>
		
		<el-dialog title="编辑用户信息" :visible.sync="update" @close="cancelUpdate">
		  <el-form :inline="true" class="demo-form-inline">
		    <el-form-item label="用户名">
			    <el-input v-model="updateUser.uname" placeholder="用户名"></el-input>
			</el-form-item>

		    <el-form-item label="邮箱">
			    <el-input v-model="updateUser.email" placeholder="邮箱"></el-input>
			</el-form-item>

			  <el-form-item label="性别">
				  <el-radio-group v-model="updateUser.gender">
					  <el-radio label="男"></el-radio>
					  <el-radio label="女"></el-radio>
				  </el-radio-group>
			  </el-form-item>
		</el-form>
		<el-form :inline="true" class="demo-form-inline">
			 <el-form-item label="头像">
				<div class="demo-image__preview">
					<el-image 
					    style="width: 100px; height: 100px"
					    :src="head == '' ? '../../././'+updateUser.head : head"
					    :preview-src-list="[head == '' ? '../../././'+updateUser.head : head]">
					  </el-image>
				    
				</div>
				</el-form-item>
			<el-form-item>
				<input type="file" name="pic" @change="getFile($event)" accept="image/gif, image/jpeg, image/jpg, image/png">
			</el-form-item>
			<el-form-item label="权限">
			  
			    <el-select v-model="updateUser.status" placeholder="权限">
			      <el-option label="用户" value="2"></el-option>
			      <el-option label="管理员" value="1"></el-option>
			      <el-option label="禁用" value="3"></el-option>
			    </el-select>
			  </el-form-item>
		  </el-form>
		  <div slot="footer" class="dialog-footer">
		    <el-button @click="cancelUpdate">取 消</el-button>
		    <el-button type="primary" @click="updateUserInfo">确 定</el-button>
		  </div>
		</el-dialog>
		
		<el-dialog title="添加用户" :visible.sync="adduser" @close="canceladdUser">
		  <el-form :inline="true" class="demo-form-inline">
		    <el-form-item label="用户名">
			    <el-input v-model="addUser.uname" placeholder="用户名"></el-input>
			</el-form-item>
			<el-form-item label="密码">
			    <el-input v-model="addUser.upass" placeholder="密码" show-password></el-input>
			</el-form-item>
		    <el-form-item label="邮箱">
			    <el-input v-model="addUser.email" placeholder="邮箱"></el-input>
			</el-form-item>
			  <el-form-item label="性别">
				  <el-radio-group v-model="addUser.gender">
					  <el-radio label="男"></el-radio>
					  <el-radio label="女"></el-radio>
				  </el-radio-group>
			  </el-form-item>
		</el-form>
		<el-form :inline="true" class="demo-form-inline">
			 <el-form-item label="头像">
				<div class="demo-image__preview">
					<el-image 
					    style="width: 100px; height: 100px"
					    :src="head == '' ? '../../././'+addUser.head : head"
					    :preview-src-list="[head == '' ? '../../././'+addUser.head : head]">
					  </el-image>
				    
				</div>
				</el-form-item>
			<el-form-item>
				<input type="file" name="pic" @change="getFile($event)" accept="image/gif, image/jpeg, image/jpg, image/png">
			</el-form-item>
			<el-form-item label="权限">
			  
			    <el-select v-model="addUser.status" placeholder="权限">
			      <el-option label="用户" value="2"></el-option>
			      <el-option label="管理员" value="1"></el-option>
			    </el-select>
			  </el-form-item>
		  </el-form>
		  <div slot="footer" class="dialog-footer">
		    <el-button @click="canceladdUser">取 消</el-button>
		    <el-button type="primary" @click="addUserInfo">确 定</el-button>
		  </div>
		</el-dialog>
	</div>
<script src="../../js/vue.js"></script>
<script src="../../js/elementUI.js"></script>
<script src="../../js/axios.js"></script>
<script src="../../js/qs.js"></script>
<script>
	let app = new Vue({
		el:'#app',
		data:{
			 head:'',
			 userInfo:{
				 uname:'',
				 email:'',
				 status:''
			 },
			 users:[],
			 update:false,
			 adduser:false,
			 addUser:[],
			 updateUser:[]
		},
		mounted(){
			this.selectUsers();
		},
		methods: {
			canceladdUser(){
				this.adduser = false;
				this.head = '';
				this.selectUsers();
			},
			cancelUpdate(){
				this.update = false;
				this.head = '';
				this.selectUsers();
			},
			getFile(obj){
                console.log(obj.target.files[0]);
                	this.head = URL.createObjectURL(obj.target.files[0]);
                    this.updateUser.head = obj.target.files[0] ;
                
                if(this.adduser){
                	this.head = URL.createObjectURL(obj.target.files[0]);
                	this.addUser.head = obj.target.files[0] ;
                }
            },
			selectUsers(){
				axios.get("../../user/selectUsers"
					).then(resp=>{
					this.users = resp.data;
				});
			},
			queryUserInfo(){
				axios.get("../../user/findMemberByQuery",{
					params:this.userInfo
				}).then(resp=>{
					console.log(resp);
					this.users = resp.data;
				});
			},
			set(index,obj){
				this.update = true;
				this.updateUser = obj;
			},
			Delete(index,obj){
				this.$confirm('此操作将禁用该用户, 是否继续?', '提示', {
			          confirmButtonText: '确定',
			          cancelButtonText: '取消',
			          type: 'warning'
			        }).then(() => {
			          this.$message({
			            type: 'success',
			            message: '操作成功!'
			          });
			          
			          axios.post("../../user/delUser",
		                        qs.stringify(
		                            {
		                                uno:obj.uno
		                            }
		                        )
		                    ).then(resp=>{
		                    	this.head = '';
		                    	this.selectUsers();
		                    	
		                    });
			        }).catch(() => {
			          this.$message({
			            type: 'info',
			            message: '已取消操作'
			          });          
			        });
			},
			add(index,obj){
				this.adduser = true;
			},
			addUserInfo(){
				let config = {
						headers:{
							'Content-Type':'multipart/form-data'
						}
					}
					let formData = new FormData();
	                formData.append("uname",this.addUser.uname);
	                formData.append("upass",this.addUser.upass);
	                formData.append("email",this.addUser.email);
	                formData.append("head",this.addUser.head);
	                formData.append("status",this.addUser.status);
	                
				axios.post("../../user/addUserInfoAdmin",
					formData,
					config
				).then(resp=>{
					console.log(resp);
					if(resp.data > 0){
						alert("添加成功");
						this.adduser = false;
						this.head = '';
						this.selectUsers();
					}else{
						alert("输入错误信息，请重新输入！");
					}
				});
			},
			updateUserInfo(){
				let config = {
						headers:{
							'Content-Type':'multipart/form-data'
						}
					}
					let formData = new FormData();
					formData.append("uno",this.updateUser.uno);
	                formData.append("uname",this.updateUser.uname);
	                formData.append("email",this.updateUser.email);
	                formData.append("head",this.updateUser.head);
	                formData.append("status",this.updateUser.status);
	                
				axios.post("../../user/updateUserInfoAdmin",
						formData,
						config
				).then(resp=>{
					if(resp.data > 0){
						alert("修改成功");
						this.update = false;
						this.head = '';
						this.selectUsers();
					}else{
						alert("输入错误信息，请重新输入！");
					}
				});
			}
		}
	});
</script>
</body>
</html>